<template>
	<view class="order-item">
		<view class="order-header">
			<view class="order-no">订单号：{{order.orderNo}}</view>
			<view class="order-status">{{getStatusText(order.status)}}</view>
		</view>
		<view class="order-content">
			<image 
				:src="getImageUrl(order)" 
				mode="aspectFill" 
				class="goods-image"
			></image>
			<view class="order-info">
				<view class="goods-name">{{order.goodsName}}</view>
				<view class="goods-specs">{{order.specs}}</view>
				<view class="price-count">
					<text class="price">¥{{order.mallGoodsVo && order.mallGoodsVo.price }}</text>
					<text class="count">x{{order.goodsCount}}</text>
				</view>
			</view>
		</view>
		<view class="payment-info">
			<text class="payment-tag" :class="{
				'cash': order.paymentType === 1,
				'points': order.paymentType === 2,
				'mixed': order.paymentType === 3,
				'gift-card': order.paymentType === 4,
				'gift-voucher': order.paymentType === 5
			}">{{getPaymentTypeText(order.paymentType)}}</text>
			<text class="pay-time" v-if="order.payTime">支付时间：{{formatDate(order.payTime)}}</text>
		</view>
		<view class="order-footer">
			<view class="total">
				<text class="shipping-fee">运费：<text class="fee">¥{{order.shippingFee || '0.00'}}</text></text>
				<text>共{{order.goodsCount}}件商品</text>
				<text>合计：</text>
				<text class="total-price">¥{{order.payAmount}}</text>
			</view>
			<view class="action-buttons">
				<text 
					class="logistics-btn" 
					v-if="order.status === 6"
					@tap="goLogistics"
				>物流信息</text>
				<slot name="actions"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	import { formatDate } from '@/utils/date.js'
	
	export default {
		name: 'OrderCard',
		props: {
			order: {
				type: Object,
				required: true
			}
		},
		methods: {
			formatDate,
			goLogistics() {
				uni.navigateTo({
					url: `/subpkg/logistics_detail/logistics_detail?orderId=${this.order.id}`
				});
			},
			getStatusText(status) {
				const statusMap = {
					'-1': '全部',
					0: '待支付',
					1: '待发货',
					2: '已完成',
					3: '已取消',
					4: '已退款',
					5: '已取消',
					6: '已发货'
				};
				return statusMap[status] || '未知状态';
			},
			getPaymentTypeText(type) {
				const paymentMap = {
					1: '现金支付',
					2: '积分支付',
					3: '积分+现金',
					4: '礼品卡',
					5: '礼品券'
				};
				return paymentMap[type] || '未知方式';
			},
			getImageUrl(order) {
				if (order.mallGoodsVo && 
					order.mallGoodsVo.mainImages && 
					order.mallGoodsVo.mainImages.length > 0 && 
					order.mallGoodsVo.mainImages[0].imageUrl) {
					return order.mallGoodsVo.mainImages[0].imageUrl
				}
				return '/static/lyf.jpt'
			}
		}
	}
</script>

<style lang="scss" scoped>
.order-item {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		
		.order-no {
			font-size: 26rpx;
			color: #666;
		}
		
		.order-status {
			color: #2979ff;
			font-size: 26rpx;
		}
	}
	
	.order-content {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		
		.goods-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
		}
		
		.order-info {
			flex: 1;
			margin-left: 20rpx;
			
			.goods-name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.goods-specs {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 20rpx;
			}
			
			.price-count {
				display: flex;
				justify-content: space-between;
				
				.price {
					color: #ff5500;
					font-size: 30rpx;
					font-weight: 500;
				}
				
				.count {
					color: #999;
					font-size: 26rpx;
				}
			}
		}
	}
	
	.payment-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx 0;
		font-size: 24rpx;
		border-bottom: 1rpx solid #eee;
		
		.payment-tag {
			padding: 4rpx 12rpx;
			border-radius: 4rpx;
			font-size: 22rpx;
			
			&.cash {
				background-color: #e1f3d8;
				color: #67c23a;
			}
			
			&.points {
				background-color: #fdf6ec;
				color: #e6a23c;
			}
			
			&.mixed {
				background-color: #f0f9eb;
				color: #67c23a;
			}
			
			&.gift-card {
				background-color: #f4f4f5;
				color: #909399;
			}
			
			&.gift-voucher {
				background-color: #ecf5ff;
				color: #409eff;
			}
		}
		
		.pay-time {
			color: #909399;
		}
	}
	
	.order-footer {
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.total {
			font-size: 26rpx;
			color: #666;
			
			.shipping-fee {
				margin-right: 20rpx;
				
				.fee {
					color: #ff5500;
					margin-left: 10rpx;
				}
			}
			
			.total-price {
				color: #ff5500;
				font-weight: 500;
				margin-left: 10rpx;
			}
		}
		
		.action-buttons {
			display: flex;
			gap: 20rpx;
			
			.logistics-btn {
				padding: 10rpx 30rpx;
				background-color: #ecf5ff;
				color: #2979ff;
				font-size: 26rpx;
				border-radius: 30rpx;
			}
		}
	}
}
</style> 